import React from "react";
import {NavLink} from "react-router-dom";
import style from "../css/Tabbar.module.css";

export default function Tabbar() {
    return <div className={style.tabbar}>
        <ul>
            {/*此处采用声明式路由 NavLink相比于a标签的好处: 选中哪个就会默认给加上一个active的class属性 所以可以给该属性设置css样式*/}
            <li>
                {/*css文件名里加上module 可以只在当前组件起作用 不影响全局样式*/}
                <NavLink activeClassName={style.zyActive} to="/film">电影</NavLink>
            </li>
            <li>
                <NavLink activeClassName={style.zyActive} to="/cinema">影院</NavLink>
            </li>
            <li>
                <NavLink activeClassName={style.zyActive} to="/center">我的</NavLink>
            </li>
        </ul>
    </div>
}